<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title=""
        left-text="嗨购"
        right-text="我的"
      >
        <template #title>
          <van-search v-model="value" disabled placeholder="手机" @click="goSearch"/>
        </template>
      </van-nav-bar>
    </header>
    <div class="content" ref="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!--轮播图-->
        <van-swipe class="my-swiper" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            v-for="item of bannerList"
            :key="item.bannerid"
          >
            <van-image
              :src="item.img"
            ></van-image>
          </van-swipe-item>
        </van-swipe>
        <!-- nav 导航 -->
        <van-grid
          column-num="5"
          icon-size="44"
          :border="false"
        >
          <van-grid-item
            v-for="item of navList"
            :key="item.navid"
            :icon="item.imgurl"
            :text="item.title"
          ></van-grid-item>
        </van-grid>
        <!-- 秒杀列表 -->
        <div class="seckillBox">
          <div class="title_wrap">
            <div class="title_wrap_title">秒杀</div>
            <div class="title_wrap_timer">
              <div class="title_wrap_timer_sec">
                {{ hours | hourFilter() }}
              </div>
              <div class="timeCountDown">
                <van-count-down :time="time">
                  <template #default="timeData">
                    <span class="block">{{ timeData.hours }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.minutes}}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.seconds }}</span>
                  </template>
                </van-count-down>
              </div>
            </div>
            <div class="seckillMore">更多秒杀<van-icon size="14" name="clock"></van-icon></div>
          </div>
          <ul class="seckillList">
            <router-link
              :to="{ name: 'detail', params: { proid: item.proid }}"
              class="seckillItem"
              v-for="item of seckillList"
              :key="item.proid"
            >
              <van-image :src="item.img1"></van-image>
              <p class="price">￥{{ (item.originprice * item.discount / 10).toFixed(0)}}</p>
              <p class="delPrice"><del>￥{{ item.originprice }}</del></p>
            </router-link>
              <!--            <li class="seckillItem" v-for="item of seckillList" :key="item.proid">-->
<!--              <van-image :src="item.img1"></van-image>-->
<!--              <p class="price">￥{{ (item.originprice * item.discount / 10).toFixed(0)}}</p>-->
<!--              <p class="delPrice"><del>￥{{ item.originprice }}</del></p>-->
<!--            </li>-->
          </ul>
        </div>
        <!--产品列表-->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad">
          <ProList :list="proList"></ProList>
        </van-list>
      </van-pull-refresh>
    </div>
    <div class="backTop" v-if="flag" @click="backTop">
      <van-icon name="down" size="30"/>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {
  NavBar,
  Search,
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  Image as VanImage,
  CountDown,
  Icon,
  List,
  PullRefresh
} from 'vant'

import { getBannerList, getProList, getSeckillList } from '@/api/home'

import ProList from '@/components/ProList'

Vue.use(NavBar)
Vue.use(Search)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(VanImage)
Vue.use(CountDown)
Vue.use(Icon)
Vue.use(List)
Vue.use(PullRefresh)

export default {
  components: {
    ProList
  },
  data () {
    return {
      bannerList: [],
      proList: [],
      value: '',
      seckillList: [],
      hours: 0,
      time: 0,
      finished: false,
      loading: false,
      flag: false,
      isLoading: false,
      count: 2,
      navList: [
        { navid: 1, title: '嗨购超市', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png' },
        { navid: 2, title: '数码电器', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg' },
        { navid: 3, title: '嗨购服饰', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg' },
        { navid: 4, title: '嗨购生鲜', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg' },
        { navid: 5, title: '嗨购到家', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg' },
        { navid: 6, title: '充值缴费', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg' },
        { navid: 7, title: '9.9元拼', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png!q70.jpg.dpg' },
        { navid: 8, title: '领券', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg.dpg' },
        { navid: 9, title: '领金贴', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg' },
        { navid: 10, title: 'plus会员', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg.dpg' }
      ]
    }
  },
  async created () {
    const res = await getBannerList()
    this.bannerList = res.data.data

    const secRes = await getSeckillList()
    this.seckillList = secRes.data.data

    const proRes = await getProList()
    this.proList = proRes.data.data
  },
  mounted () {
    const data = new Date()
    this.hours = data.getHours()
    this.time = data.getTime()
    this.$refs.content.addEventListener('scroll', () => {
      this.flag = this.$refs.content.scrollTop > 300
    })
  },
  beforeDestroy () {
    this.$refs.content.removeEventListener('scroll', () => {})
  },
  methods: {
    onLoad () {
      this.loading = true
      getProList({ count: this.count }).then(res => {
        this.loading = false
        if (res.data.data.length === 0) {
          this.finished = true
        } else {
          console.log('11', res.data)
          this.proList = [...this.proList, ...res.data.data]
          this.count++
        }
      })
    },
    onRefresh () {
      this.isLoading = true
      getProList().then(res => {
        this.isLoading = false
        this.proList = res.data.data
        this.finished = false
        this.count = 2
      })
    },
    backTop () {
      this.$refs.content.scrollTop = 0
    },
    goSearch () {
      // TODO 带数据过去 然后渲染产品页
      this.$router.push('/search')
    }
  }
}

</script>

<style lang="stylus" scoped>
.van-search
  padding 0
.my-swipe
  .van-swipe-item
    color #fff
    height 220px
    text-align center
    background-color #39a9ed
    .van-image
      width 100%
      .van-image__img
        width 100%
.van-grid-item__content
  background-color transparent
// 倒计时样式
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}

.seckillBox
  width 94%
  margin 10px 3%
  background-color #fff
  height 1.6rem
  border-radius 15px
  .title_wrap
    height 0.4rem
    background url('') no-repeat
    background-size contain
    .title_wrap_title
      float: left;
      display: inline-block;
      height: 0.3rem;
      margin-top: 0.05rem;
      margin-right: 0.1rem;
      margin-left: 0.15rem;
      font-family: "微软雅黑";
      font-size: .16rem;
      color: #333;
      letter-spacing: 0;
      line-height: 0.3rem;
      font-weight bold
    .title_wrap_timer
      float left
      display inline-block
      vertical-align middle
      line-height 0.4rem
      height 0.4rem
      .title_wrap_timer_sec
        height: 100%;
        border-radius: 5px;
        font-size: 0.14rem;
        color: #ff2727;
        letter-spacing: 0;
        // padding-right: 0.1rem;
        // padding-left: 0.1rem;
        float: left;
        position: relative;
        left: -1px;
        // margin-right: .2rem;
        line-height: 0.4rem;
        &:after
          height: 0.2rem;
          width: 0.2rem;
          content: "";
          display: inline-block;
          vertical-align: middle;
          background-image: url(//wq.360buyimg.com/wxsq_project/portal/m_jd_index/images/seckill-time-to_1de70c91.png);
          background-repeat: no-repeat;
          // background-position: 10%;
          background-size: contain;
      .timeCountDown
        float left
        padding-top 0.1rem
        width 1rem
        transform scale(0.8)
    .seckillMore
      float right
      color #f66
      line-height 0.4rem
      padding-right 0.2rem
      font-size 0.12rem
      .van-icon-clock
        transform rotate(-135deg)
        margin 0.02rem
.seckillList
  display flex
  .seckillItem
    flex 1
    display flex
    justify-content center
    align-items center
    flex-direction column
    .van-image__img
      width 80%
      height 50px
      margin 0 auto
      display block
    .price
      color #f66
      text-align center
    .delPrice
      color #666
      text-align center
.backTop
  position fixed
  bottom 110px
  right 10px
  width 36px
  height 36px
  border 1px solid #efefef
  background-color #efefef
  border-radius 50%
  transform rotate(180deg)
  display flex
  justify-content center
  align-items center
  color #666
</style>
